<template>
  <div class="card content-box" v-if="isDataLoaded">
    <div class="cabinetLayout">
      <TreeFilter
        label="name"
        title=""
        :data="menuList"
        :needSearch="false"
        :onlyLeafNodeHighlight="false"
        :default-value="menuList[0].children.length && menuList[0].children[0].id"
        @change="_change"
      />
      <div class="layoutInfoWrap">
        <el-carousel
          height="100%"
          v-if="bannerImgList?.length"
          style="width: 100%; height: 100%"
          :loop="true"
          :pause-on-hover="true"
          trigger="click"
        >
          <el-carousel-item v-for="item in bannerImgList" :key="item" style="width: 100%; height: 100%">
            <el-image
              fit="scale-down"
              :src="`${VITE_API_URL}/file/download/${item}`"
              style="width: 100%; height: 100%"
            ></el-image>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx" name="electrityMeterControl">
import { onMounted, ref } from "vue";
import TreeFilter from "@/components/TreeFilter/index.vue";
import { getBannerShowList } from "@/api/modules/bannerShowManage/bannerShow";
import { ResultData } from "@/api/interface";
import { VITE_API_URL } from "@/config/index";

const isDataLoaded = ref(false);
const bannerList: any = ref([]);
const bannerImgList = ref([]);
const menuList: any = ref([
  {
    isParent: true,
    id: "1",
    name: "规章制度",
    children: []
  },
  {
    isParent: true,
    id: "2",
    name: "实验场景",
    children: []
  }
]);

/**
 * 命令树选择
 */
const _change = function (id: string | number): void {
  const bannerItem = bannerList.value.find((item: any) => {
    return item.id === id;
  });

  !bannerItem.isParent && (bannerImgList.value = bannerItem.bannerFileIds?.split(",") ?? []);
};

onMounted(async () => {
  try {
    const { result } = (await getBannerShowList()) as ResultData;
    isDataLoaded.value = true;
    menuList.value.forEach((item: any, index: number) => {
      item.children = result["dataList" + (index + 1)].map((val: any, idx: number) => {
        return {
          isParent: false,
          id: item.id + idx,
          name: val.bannerName,
          bannerFileIds: val.bannerFileIds
        };
      });

      bannerList.value = bannerList.value.concat(item.children);

      const bannerFileIds = bannerList.value.find((item: any) => {
        return item.id === (menuList.value[0].children as any)[0].id;
      })?.bannerFileIds;
      bannerImgList.value = bannerFileIds?.split(",") ?? [];
    });
  } catch (error) {}
});
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
<style>
.el-carousel__button {
  background-color: rgb(0 0 0 / 20%) !important;
}
.is-active .el-carousel__button {
  background: var(--el-color-primary) !important;
}
</style>
